<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ESD实时监控系统</title>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/backend/plugins/element-ui/index.css">
    <link rel="stylesheet" href="/backend/plugins/font-awesome/css/font-awesome.min.css">
    <style>
        html,body {
            margin: 0;
            font-size: 8px;
        }
        .main-header {
            display: inline-block;
            color: #fff;
            height: 7vh;
            background: linear-gradient(to right, #0abdfe, #67f0e0);
        }
        #myLogo {
            float: left;
            display: flex;
            justify-content: center;
            align-items: center ;
            margin-top: 0.5vh; 
            margin-left: -0.8vw; 
        }
        #myLogo img {
            height: 6vh;
        }
        #myLogo span{
            font-size: 4vh;
            font-weight: 400;
            /* color: #fff; */
            color: aliceblue ;
            margin-left: 0.5vh
        }
        .avatar-wrapper img{
            width: 5vh;
            height: 5vh;
            border-radius: 2.5vh;
            vertical-align: middle
        }
        .right-menu {
            font-size: 1.7vh;
            float: right;
            padding: 1vh 0 0 0;
            color: #fff;
        }
        #username{
            color: #fff;
            font-size: 1.7vh;
        }
        .el-aside{
            overflow: hidden;
        }
        .el-menu{
            border: 0 none;
        }
        /****************************************************************/
        .index1{
            font-size: 0.8vw;
            height: 5vh;
            display: flex;
            align-items: center; /* 垂直居中 */
        }
        .el-submenu__title{
            font-size: 0.8vw;
            height: 5vh;
            display: flex;
            align-items: center; /* 垂直居中 */
        }
        .el-submenu .el-menu .el-menu-item{
            font-size: 0.8vw;
            height: 5vh;
            display: flex;
            align-items: center; /* 垂直居中 */
            margin-left: -0.5vw;
        }
        .el-submenu__icon-arrow{
            font-size: 0.8vw;
            margin-bottom: 0;
        }
        /****************************************************************/
        .main aside .menu{
            width: 100%;
            border-right:0;
        }
        #aside{
            background-color: #f2f6f8;
        }
        .el-menu-item{
            background-color: #f2f6f8;
        }
        .el-submenu__title{
            background-color: #f2f6f8;
        }
        .el-menu .fa{
            vertical-align: middle;
            margin-right: 0.1vw;
            width: 2.5vh;
            text-align: center;
            font-size: 1.7vh;
        }
        /* .el-menu-item a{
            color: #5d5e5f
        } */
        .el-menu-item:hover,.el-menu-item.is-active {
            color: #207a0d;
            background: #d9e7e7;
        }
        /* .el-menu-item:hover a,.el-menu-item.is-active a{
            color: #207a0d;
        } */
        .el-submenu__title:hover{
            background: none;
        }
        .mainIframe{
            margin-left: 0.5vw;
            margin-right: 0.5vw;
        }
        /* dialog 实际宽度 */
        .el-dialog{
            width: 350px;
        }
    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <el-container>
        <el-header class="main-header" height="7vh">
            <nav class="navbar navbar-static-top">
                <!-- Logo -->
                <div id="myLogo">
                    <img src="/backend/images/logo2.png">
                    <span>ESD实时监控系统</span>
                </div>

                <div class="right-menu" style="float: right;">
                    <span class="help"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>帮助</span>
                    <el-dropdown class="avatar-container right-menu-item" trigger="click">
                        <div class="avatar-wrapper">
                            <img src="/backend/images/user2-160x160.jpg" class="user-avatar">
                            <span id="username">{{currentUser.cname}}</span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided>
                                <span style="display:block; font-size: 0.8vw;" @click="handlePwd">修改密码</span>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <span style="display:block; font-size: 0.8vw;" @click="logout">退出登录</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </nav>
        </el-header>
        <el-container id="mainContainer">
            <el-aside id="aside">
                <el-menu :default-active="'1'">
                    <el-menu-item index="1" class="index1" @click="clickShouye">
                        <template slot="title">
                            <i class="fa fa-bank"></i>
                            系统首页
                        </template>
                    </el-menu-item>
                    <el-submenu v-for="menu in menuList" :index="menu.path" :key="menu.path">
                        <template slot="title">
                            <i class="fa" :class="menu.icon"></i>
                            {{menu.title}}
                        </template>
                        <template v-for="child in menu.children">
                            <el-menu-item :index="child.path" @click="clickChild(child.linkUrl)">
                                <i class="fa" :class="child.icon"></i>
                                <!-- <a :href="child.linkUrl" target="right" style="text-decoration: none;">{{child.title}}</a> -->
                                {{child.title}}
                            </el-menu-item>
                        </template>
                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-container>
                <iframe ref="mainIframe" class="mainIframe" name="right" src="/backend/page/index/index.html" width="100%" style="border: none;"></iframe>
            </el-container>
        </el-container>
    </el-container>
    <!-- 编辑标签弹层 -->
    <div>
        <el-dialog title="修改密码" :visible.sync="pwdFormVisible" center>
            <el-form ref="pwdEditForm" :model="pwdData" :rules="pwdRules" label-position="right"
                     label-width="100px">
                <el-row>
                    <el-form-item label="原 密 码:" prop="oldPwd">
                        <el-input v-model="pwdData.oldPwd" type="password"/>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="新 密 码:" prop="newPwd">
                        <el-input v-model="pwdData.newPwd" type="password"/>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="确认新密码:" prop="confirmNewPwd">
                        <el-input v-model="pwdData.confirmNewPwd" type="password"/>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pwdFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleRePwd()">确定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="/backend/plugins/vue/vue.js"></script>
<script src="/backend/plugins/element-ui/index.js"></script>
<script src="/backend/plugins/axios/axios.min.js"></script>
<script type="text/javascript" src="/backend/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/backend/js/winReload.js"></script>
<script src="/backend/js/style.js"></script>
<script src="/backend/js/request.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            currentUser: {
                username: '',
                cname: '',
                phone: ''
            } ,
            pwdFormVisible: false,
            pwdData:{},
            pwdRules: {//校验规则
                oldPwd: [{required: true, message: '原密码为必填项', trigger: 'blur'},
                    {pattern: '[^ \x22]+', message: '原密码不能为空字符串'},
                    { min: 6, max: 25, message: '长度在6到25个字符', trigger: 'blur' }],
                newPwd: [{required: true, message: '新密码为必填项', trigger: 'blur'},
                    {pattern: '[^ \x22]+', message: '新密码不能为空字符串'},
                    { min: 6, max: 25, message: '长度在6到25个字符', trigger: 'blur' }],
                confirmNewPwd: [{required: true, message: '确认新密码为必填项', trigger: 'blur'},
                    {pattern: '[^ \x22]+', message: '确认新密码不能为空字符串'},
                    { min: 6, max: 25, message: '长度在6到25个字符', trigger: 'blur' }]
            },
            menuList: [
                {
                    "path": "2",
                    "title": "终端管理",
                    "icon": "fa-gears",
                    "children": [
                        {
                            "path": "/2-1",
                            "icon": "fa-gear",
                            "title": "终端列表",
                            "linkUrl": "/backend/page/device/list.html",
                            "children": []
                        },
                        {
                            "path": "/2-2",
                            "icon": "fa-tachometer",
                            "title": "终端类型列表",
                            "linkUrl": "/backend/page/deviceType/list.html",
                            "children": []
                        },
                        {
                            "path": "/2-3",
                            "icon": "fa-circle-o",
                            "title": "通道类型列表",
                            "linkUrl": "/backend/page/channelType/list.html",
                            "children": []
                        },
                        {
                            "path": "/2-4",
                            "icon": "fa-signal",
                            "title": "网关列表",
                            "linkUrl": "/backend/page/gateway/list.html",
                            "children": []
                        },

                        {
                            "path": "/2-5",
                            "icon": "fa-tasks",
                            "title": "生产线列表",
                            "linkUrl": "/backend/page/line/list.html",
                            "children": []
                        }
                    ]
                },
                {
                    "path": "3",     //菜单项所对应的路由路径
                    "title": "统计分析",     //菜单项名称
                    "icon": "fa-area-chart",
                    "children": [//是否有子菜单，若没有，则为[]
                        {
                            "path": "/3-1",
                            "icon": "fa-calendar-minus-o",
                            "title": "日志列表",
                            "linkUrl": "/backend/page/log/list.html",
                            "children": []
                        },
                        {
                            "path": "/3-2",
                            "icon": "fa-table",
                            "title": "日志统计",
                            "linkUrl": "/backend/page/log/statistics.html",
                            "children": []
                        },
                        {
                            "path": "/3-3",
                            "icon": "fa-calendar-minus-o",
                            "title": "历史测量数据",
                            "linkUrl": "/backend/page/log/data.html",
                            "children": []
                        }
                    ]
                }
            ]
        },
        created(){
        },
        mounted() {
            axios.get("/user/getUserInfo").then((res)=>{
                this.currentUser = res.data.data ;
            });
        },
        methods: {
            clickShouye() {
                $axios({
                    url: '/ping',
                    method: 'get',
                    params: null
                }).then((res) => {});
                this.$refs.mainIframe.contentWindow.location.href = "/backend/page/index/index.html";
            },
            clickChild(url){
                $axios({
                    url: '/ping',
                    method: 'get',
                    params: null
                }).then((res) => {});
                this.$refs.mainIframe.contentWindow.location.href = url ;
            },
            logout(){
                $axios({
                    url: '/user/logout',
                    method: 'get',
                    params: null
                }).then((res) => {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                    window.location.reload();
                });
            },
            handlePwd(){
                this.pwdData={};
                this.pwdFormVisible = true;
            },
            handleRePwd(){
                //进行表单校验
                this.$refs['pwdEditForm'].validate((valid) => {
                    if (valid) {
                        if (this.pwdData.newPwd !== this.pwdData.confirmNewPwd){
                            this.$message.error("两次输入的密码不一致");
                            return;
                        }
                        this.pwdData.username = this.currentUser.username ;
                        $axios({
                            url: '/user/updateUserPwd',
                            method: 'post',
                            data: this.pwdData
                        }).then((res) => {
                            if (res.code === 0) {
                                this.$message({
                                    type: 'success',
                                    message: res.msg
                                });
                                this.pwdFormVisible = false;
                                window.location.reload();
                            }else {
                                //执行失败
                                this.$message.error(res.data.msg);
                            }
                            
                        })
                    } else {
                        //表单校验不通过
                        this.$message.error("表单数据校验失败!");
                        return false;
                    }
                });
            }
        }
    });
</script>
</html>
